import React from 'react';
import {Table, Icon, Button, Popconfirm, message, Breadcrumb } from 'antd';
import {  Link} from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class questionTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading:true,
        }    
    }
    getList=()=>{
        this.setState({loading:true});
        fetch(config.base+"question/list?questionnaireId="+this.props.location.state,{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const data = []
                if(rep.length===0){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.length ; i++) {
                    data.push({
                        key: rep[i].id,
                        content: rep[i].content,
                        type:rep[i].type,
                        options:rep[i].a ? ['A:'+rep[i].a, 'B:'+rep[i].b, 'C:'+rep[i].c, 'D:'+rep[i].d] : null,
                        optionArr:rep[i].a?{ a: rep[i].a, b: rep[i].b, c: rep[i].c, d: rep[i].d} : null
                        })
                }
                this.setState({
                    tDate: data,
                    loading:false
                })
                }
            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        onDelete = (index) => {     
            const tDate = [...this.state.tDate];
            this.setState({loading:true});
            fetch(config.base+"question/delete",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+tDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        tDate.splice(index, 1);
                        this.setState({ tDate });
                    }else{ 
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        componentDidMount() {
            this.getList();
        }
        render() {
            const tDate=this.state.tDate;
            const  columns = [{
                    title: '问题类型',
                    width: '20%',
                    dataIndex: 'type',
                    render:(value) => {
                      switch(value){
                        case 1:return '单选题';break;
                        case 2:return '多选题';break;
                        case 3:return '客观题';break;
                        default:return '未设置';break;
                      }
                    }
                }, {
                    title: '问题内容',
                    width: '20%',
                    dataIndex: 'content',
                },{
                    title: '问题选项',
                    width: '40%',
                    dataIndex: 'options',
                    render: (options) => {
                      if(options === null){
                        return <p>客观题没有选项</p>
                      }else{
                        return (
                          <ul>
                            {
                            options.map((item)=>
                              (<p>选项{item}</p>)
                            ) 
                          }
                        </ul>)
                      }
                    }
                }, {
                    title: '操作',
                    width: '20%',
                    dataIndex: 'operate',
                    render:(text, record, index)=> {
                        return (<div><Link to={{pathname:"/questionDetailUpdate",state:tDate[index]}}>
                            <Button type="primary" htmlType="button" >修改</Button></Link>&nbsp;&nbsp;
                            &nbsp;&nbsp;
                            <Popconfirm title="确定删除?" onConfirm={()=>this.onDelete(index)}>
                            <Button type="danger" htmlType="button"  >删除</Button>
                            </Popconfirm></div>)
                    }
                }];

            return (
                <div>
                    <Breadcrumb ><Breadcrumb.Item><a href="javascript:window.history.go(-1);">返回</a></Breadcrumb.Item></Breadcrumb>
                    <br />
                    <Button><Link to={{pathname:"/questionDetailAdd", state: this.props.location.state }}>添加问题</Link></Button>
                    <br /><br />
                    <Table columns={columns} dataSource={tDate} bordered pagination={false} loading={this.state.loading} className="animated fadeInUp " />
                </div>
            )
        }
    }
